﻿@model Zatify.WebUI.Models.IndividualViewModel
@{
    ViewBag.Title = "Individual";
    ViewBag.ContentTitle = "Sign Up";
    Layout = "~/Views/Shared/_ContentLayout.cshtml";
}
<style type="text/css">
    .upl
    {
        height: 151px;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        visibility: visible;
        width: 151px;
    }
</style>
@section Scripts
{
    <script type="text/javascript">

        function removeIframe(iframeId) {

            iframeId.parentNode.removeChild(iframeId);
        }

        function fileUpload(formID, action_url, div_id) {

            var file = $('#datafile');
            if (!isImage(file.val())) {
                alert('Image file has not valid type!');
                return;
            }

            var form = document.getElementById(formID);

            // Create the iframe...
            var iframe = document.createElement("iframe");
            iframe.setAttribute("id", "upload_iframe");
            iframe.setAttribute("name", "upload_iframe");
            iframe.setAttribute("width", "0");
            iframe.setAttribute("height", "0");
            iframe.setAttribute("border", "0");
            iframe.setAttribute("style", "width: 0; height: 0; border: none;");

            // Add to document...
            form.parentNode.appendChild(iframe);
            window.frames['upload_iframe'].name = "upload_iframe";

            iframeId = document.getElementById("upload_iframe");

            // Add event...
            var eventHandler = function () {

                if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
                else iframeId.removeEventListener("load", eventHandler, false);

                // Message from server...
                if (iframeId.contentDocument) {
                    content = iframeId.contentDocument.body.innerHTML;
                } else if (iframeId.contentWindow) {
                    content = iframeId.contentWindow.document.body.innerHTML;
                } else if (iframeId.document) {
                    content = iframeId.document.body.innerHTML;
                }
                               
                $("#imagePath").val(content);
                document.getElementById(div_id).innerHTML = "";
                //document.getElementById(div_id).innerHTML = content;
                document.getElementById("profileImage").setAttribute("src", content)

                // Del the iframe...
                //setTimeout(removeIframe(iframeId), 250);
                //setTimeout('removeIframe(iframeId)', 250);
            }

            if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
            if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);

            // Set properties of form...
            form.setAttribute("target", "upload_iframe");
            form.setAttribute("action", action_url);
            form.setAttribute("method", "post");
            form.setAttribute("enctype", "multipart/form-data");
            form.setAttribute("encoding", "multipart/form-data");

            form.submit();
            document.getElementById(div_id).innerHTML = "Uploading...";
        }

        $(document).ready(function () {

            $('#UserID').focus();
            $('#TimeZoneOffset').val(new Date().getTimezoneOffset());

            $('#Password').val('@Model.Password');
            $('#ConfirmPassword').val('@Model.Password');

            $("#datafile").change(function () {

                if ($(this).val() && $(this).val().length > 0) {
                    fileUpload('imageFileForm', '@Url.Action("UploadTempImage")', 'upload');
                }

                return false;
            });
        });

    </script>
}
<div class="registration_left_col">
    <h6>
        Sign Up for your Zatify account:</h6>
    <div class="login_fillbox">
        <div class="line" style="width: 100%;">
            <div class="upload_pic">
                @using (Html.BeginForm("IndvPost", "Individual", FormMethod.Post, new { id = "imageFileForm", style = "position: relative;" }))
                {
                    <img id="profileImage" src="@Url.Content("~/Content/zatify/images/upload_picture.jpg")" alt="" style="width: 151px; height: 151; margin-bottom: 5px; border: 1px solid #C6C6C6; padding: 2px;" />
                    <div id="upload">
                    </div>
                    <input class="upl" type="file" id="datafile" name="datafile" style="visibility: visible" />
                }
            </div>
        </div>
        @using (Html.BeginForm("Individual", "Registration", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            @Html.HiddenFor(m => m.TimeZoneOffset)
            @Html.Hidden("imagePath")
            <div class="line">
                <label for="username" class="label_text">
                    User ID:</label>
                @Html.TextBoxFor(m => m.UserID, new { @class = "inputbox_text inputbox_bg_img40", title = "Enter your User ID" })
            </div>
            <div class="line">
                <label for="password" class="label_text">
                    Password<span>:</span></label>
                @Html.PasswordFor(m => m.Password, new { @class = "inputbox_text inputbox_bg_img40", title = "Password" })
            </div>
            <div class="line">
                <label for="password" class="label_text">
                    Confirm Password<span>:</span></label>
                @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "inputbox_text inputbox_bg_img40", title = "Confirm Password" })
            </div>
            <div class="line">
                <label for="username" class="label_text">
                    Email (Optional):</label>
                @Html.TextBoxFor(m => m.Email, new { @class = "inputbox_text inputbox_bg_img40", title = "Enter your Email (Optional)" })
            </div>
            <div class="line">
                <label for="username" class="label_text">
                    Zip Code:</label>
                @Html.TextBoxFor(m => m.ZipCode, new { @class = "inputbox_text inputbox_bg_img40", title = "Enter your zip code" })
            </div>
            <div class="line">
                <label for="username" class="label_text">
                    Phone Number (Optional):</label>
                @Html.TextBoxFor(m => m.Phone, new { @class = "inputbox_text inputbox_bg_img40", title = "Enter your Phone (Optional)" })
            </div>
            <div class="line">
                <label for="username" class="label_text">
                    Reffered by (Optional):</label>
                @Html.TextBoxFor(m => m.ReferredBy, new { @class = "inputbox_text inputbox_bg_img40", title = "I am reffered by (Optional)" })
            </div>
            <input type="submit" value="Sign Up" class="blue_btn" style="margin-left: 150px;" />
            @Html.ValidationSummary()                
        }
    </div>
    <div class="clearfix">
    </div>
</div>
<div class="registration_right_col">
    <h3>
        App Description</h3>
    <p>
        Zatify is a free service that delivers to you only the promotional offers you want,
        when and where you want them. Users simply create an account with a username, password,
        and zip code. No personal information is collected so all the preferences you fill
        out are completely anonymous. Add your interests and likes and you'll receive free
        promos for the places you like to shop, eat, or for the services you need. To take
        advantage of the offers you receive, simply show the promo at the business. Gone
        are the days when you have to pay for deals upfront and rush to use them before
        they expire.
        <br />
        <br />
        A highlight of Zatify is that most offers are received only when you are in close
        proximity to businesses that match your profile. This makes it so that offers are
        received when you will most likely be interested in them. Zatify also gives you
        the ability to manually search our nearby partners and view their current offers
        in case you want to stray from your set interests. Craving Mexican food but didn't
        add it to your profile? Simply open your Zatify app to the search function and type
        in "Mexican" or just "restaurants". Zatify will pull up all of our partners in the
        area, listed by current proximity to you. Then just select the one that interests
        you and view their current offers.
        <br />
        <br />
        With Zatify you will save when and where you want and at your favorite businesses.
        You can go into your Zatify preferences at any time to modify your likes and interests
        as your life changes. Completing your profile thoroughly will greatly increase Zatify's
        ability to offer you the goods and services you want. Join Zatify today and save
        money on the goods and services you are already looking for.</p>
</div>
<div class="toturials_content">
    <h3>
        <!--User Toturials-->
    </h3>
    <div class="toturials_content_area">
        <!--tutorials block left img-->
        <div class="tutorials_block">
            <div class="tutorials_img_left">
                <img src="@Url.Content("~/Content/zatify/images/tutorials_img/user_account_img.jpg")" alt="" title="" />
            </div>
            <div class="tutorials_text">
                <h3>
                    Anonymous User Account &amp; Profile</h3>
                <p>
                    Start saving money with just a username, password &amp; zip code Zatify is anonymous
                    for users and simple to use.</p>
            </div>
        </div>
        <!--end tutorials block left img-->
        <!--tutorials block right img-->
        <div class="tutorials_block">
            <div class="tutorials_img_right">
                <img src="@Url.Content("~/Content/zatify/images/tutorials_img/your_preferences_img.jpg")" alt="" title="" />
            </div>
            <div class="tutorials_text">
                <h3>
                    Set Your Preferences to Only Get the Deals You Want</h3>
                <p>
                    Tell us about yourself and your interests and receive your custom offers from Zatify.Edit
                    or update your preferences at any time to receive only the offers you want and aren't
                    ever bothered with the ones that you don't.</p>
            </div>
        </div>
        <!--end tutorials block right img-->
        <!--tutorials block left img-->
        <div class="tutorials_block">
            <div class="tutorials_img_left">
                <img src="@Url.Content("~/Content/zatify/images/tutorials_img/your_personalized_deals_img.jpg")" alt="" title="" />
            </div>
            <div class="tutorials_text">
                <h3>
                    Get Your Personalized Deals Where &amp; When You Need Them</h3>
                <p>
                    No coupons needed! Start receiving deals based on your personal preferences and
                    location and watch your savings rack up! No purchasing offers from Zatify,instead
                    just show your offer at the register and redeem immediately.</p>
            </div>
        </div>
        <!--end tutorials block left img-->
        <!--tutorials block right img-->
        <div class="tutorials_block">
            <div class="tutorials_img_right">
                <img src="@Url.Content("~/Content/zatify/images/tutorials_img/search_browse_nearby_img.jpg")" alt="" title="" />
            </div>
            <div class="tutorials_text">
                <h3>
                    Search &amp; Browse Nearby</h3>
                <p>
                    Zatify will send you only the offers you want automatically based on your preferences
                    or you can search or view all nearby offers from our partners.</p>
            </div>
        </div>
        <!--end tutorials block right img-->
        <div class="clearfix">
        </div>
    </div>
    <!--<div class="tutorials_video_area"><a target="" href="#"><img src="images/video_img.jpg" alt="" /></a></div>-->
</div>
